<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import H1 from "../../components/H1.vue";
import echarts from './EChartsA.vue'
import echartsB from './EChartsB.vue'
import TaberA from './TableA.vue'
import useStore from "../../modules/store/Authority"
import { ref,reactive } from 'vue'
//@ts-ignore
import {ElMessage, ElMessageBox} from 'element-plus'

const store = useStore()
console.log(store)
// 定义一个响应式的input值
const input = ref(null)
// 控制对话框的显示与隐藏的开关
const dialogVisible = ref(false)
//控制对话框的显示与隐藏的开关
const dialogVisibleA = ref(false)
// 重置密码值
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  pass: ''
})
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码没有值'))
  } else {
    // setTimeout(() => {
    // 至少8个字符，至少1个大写字母，1个小写字母和1个数字,不能包含特殊字符（非数字字母）
    const regExp =/^(?=.*[A-Za-z ])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/
    if (!regExp.test(value)) {
      callback(new Error('需要8-16位数值,大小写至少一个'))
    } else {
      callback()
    }
    callback()
    // }, 1000);
  }
}
const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ validator: validatePass, trigger: 'blur' }]
})
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      store.reset(ruleForm.pass)
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}


const AddFrom = ref<FormInstance>()
const formInline = reactive({
  AccountNumber: '',
  name: '',
  number: '',
  Authority: '',
  Position: '',
  password: '',
  time: '',
  key: 0
})
const submitFormEdit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      dialogVisible.value = false
      formInline.key = store.list.length+1
      store.add(formInline)
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

// 对话框的点击框外的事件
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}

const handleCloseA = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
      })
}

// 搜索列表
const search = ()=>{
  //  @ts-ignore 调用pinia中的搜索方法
  store.searchA(input.value)
}
const reset = ()=>{
  // store.reset()
  dialogVisibleA.value = true
}
const deleteA =()=>{
  store.batch()
}
</script>

<template>
  <H1>
    <template v-slot:title>权限管理</template>
    <template v-slot:subheading></template>
  </H1>
  <el-row :gutter="20" style="margin: 15px 0">
    <el-col :span="2"><p style="text-align: center; line-height: 30px">账号/姓名</p></el-col>
    <el-col :span="4"><el-input v-model.trim="input" placeholder="请输入关键字" /></el-col>
    <el-col :span="1.5"><el-button class="button" type="warning" @click="search">搜索</el-button></el-col>
    <el-col :span="12">
      <el-button class="button" type="warning"  @click="dialogVisible = true">创建</el-button>
      <el-button class="button" type="warning" @click="reset">重置密码</el-button>
      <el-button class="button" type="warning" @click="deleteA">批量删除</el-button>
    </el-col>
  </el-row>
  <TaberA></TaberA>
  <div class="chart">
    <echarts></echarts>
    <echartsB></echartsB>
  </div>
<!--  创建账号-->
  <el-dialog
      v-model="dialogVisible"
      title="创建账号"
      width="30%"
      :before-close="handleClose"
  >
    <el-form
        :inline="true"
        :model="formInline"
        ref="AddFrom"
        class="demo-form-inline">
      <el-form-item
          prop="AccountNumber"
          :rules="[
                    { required: true, message: '请输入账号' },
                    { type: 'string', message: '账号类型未字符串' },
                  ]"
          label="账号">
        <el-input v-model.trim="formInline.AccountNumber" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="name"
          :rules="[
                    { required: true, message: '请输入姓名' },
                    { type: 'string', message: '名字的类型未字符串' },
                  ]"
          label="姓名">
        <el-input v-model.trim="formInline.name" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="number"
          :rules="[
                    { required: true, message: '手机号为空' },
                    { type: 'string', message: '请满足正确的类型' },
                    {
                      pattern: /^[1][3-9][0-9]{9}$/,
                      message: '需要正确的手机号',
                      trigger: 'blur'
                    },
                  ]"
          label="手机号">
        <el-input v-model.trim="formInline.number" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="Position"
          :rules="[
                    { required: true, message: '输入自己的职位' },
                    { type: 'string', message: '输入正确的类型' },
                  ]"
          label="职位">
        <el-input v-model.trim="formInline.Position" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="Authority"
          :rules="[
                    { required: true, message: '输入权限' },
                    { type: 'string', message: '输入正确的类型' },
                  ]"
          label="权限">
        <el-input v-model.trim="formInline.Authority" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="password"
          type="password"
          :rules="[
                    { required: true, message: '未输入密码' },
                    { type: 'string', message: '类型需要是字符串' },
                     {
                      pattern: /^(?=.*[A-Za-z ])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/,
                      message: '需要大写一个，一个特殊字符，还满足8个字符以上',
                      trigger: 'blur'
                    },
                  ]"
          label="密码">
        <el-input v-model.trim="formInline.password" placeholder="请输入密码" clearable />
      </el-form-item>
      <el-form-item
          prop="time"
          :rules="[
                    { required: true, message: '请输入一个时间点' },
                    { type: 'string', message: '时间点类型错误' },
                  ]"
          label="添加时间">
        <el-date-picker
            v-model.trim="formInline.time"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="Pick a date"
            :default-value="new Date(2023, 7, 14)"/>
      </el-form-item>
      <el-form-item style="display: flex;justify-content: center">
        <el-button type="danger" @click="submitFormEdit(AddFrom)">创建</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
<!--修改密码-->
  <el-dialog
      v-model="dialogVisibleA"
      title="Tips"
      width="30%"
      :before-close="handleCloseA"
  >
    <el-form :inline="true"
             ref="ruleFormRef"
             :rules="rules"
             :model="ruleForm"
             class="demo-form-inline">
      <el-form-item label="密码"
                    prop="pass">
        <el-input v-model.trim="ruleForm.pass" type="password" show-password placeholder="请输入密码" clearable />
      </el-form-item>
      <el-form-item style="display: flex;justify-content: center">
        <el-button type="danger" @click="submitForm(ruleFormRef)">确认修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">
.chart {
  display: flex;
  justify-content: space-between;
}
::v-deep.el-form--inline .el-form-item{
  width: 100%;
}
.el-input{
  width: 250px;
}
.button {
  background:  #ffb300;
  color: white;
}
</style>
